<template>
  <view>
    <view
      class="top-header"
      :style="{ position: isFixed ? 'fixed' : 'static' }"
    >
      <!-- 头部 -->
      <SearchBar @search="searchHandler" :keyword="keyword" />

      <!-- 过滤菜单 -->
      <view class="filter-menu">
        <view
          :class="{ active: activeIndex === index }"
          v-for="(item, index) in menuList"
          @click="selectMenu(index)"
          :key="index"
          >{{ item }}
        </view>
      </view>
    </view>

    <!-- 商品列表 -->
    <view class="goods-list" :style="{ marginTop: isFixed ? '220rpx' : '0' }">
      <view
        class="goods"
        v-for="(item, index) in goodsList"
        :key="index"
        @click="toItem(item.goods_id)"
      >
        <image :src="item.goods_small_logo" alt=""></image>
        <view class="right">
          <view class="goods-name text-line2">{{ item.goods_name }}</view>
          <view class="price"
            >￥<text>{{ item.goods_price }}</text
            >.00</view
          >
        </view>
      </view>
    </view>
    <view class="btm-line" v-show="isLastPage">
      --我是有底线的--
    </view>
  </view>
</template>

<script>
import SearchBar from '@/components/SearchBar'

const PAGE_SIZE = 6

export default {
  components: {
    SearchBar
  },
  data () {
    return {
      menuList: ['综合', '销量', '价格'],
      // 默认选中第一个
      activeIndex: 0,
      // 商品列表
      goodsList: [],
      // 搜索框的关键字
      keyword: '',
      // 是否是最后一页
      isLastPage: false,
      // 头部是否固定
      isFixed: false
    }
  },
  onLoad (options) {
    // 页码
    this.pageNum = 1
    // 是否在请求中
    this.isRequesting = false

    this.keyword = options.catName
    this.queryGoodsList()
  },
  // 监听用户下拉动作,加载第一页数据
  onPullDownRefresh () {
    this.isFixed = false
    this.reload()
  },
  onPageScroll () {
    // 页面滚动时,头部固定
    this.isFixed = true
  },
  // 监听用户上拉动作,加载下一页数据
  onReachBottom () {
    // 上拉加载到最后一页,返回
    if (this.isLastPage) {
      return
    }
    this.pageNum++
    this.queryGoodsList()
  },
  methods: {
    // 按输入框输入的内容进行搜索
    searchHandler (inputVal) {
      this.keyword = inputVal
      this.reload()
    },
    toItem (goodsId) {
      wx.navigateTo({
        url: '/pages/item/main?goodsId=' + goodsId
      })
    },
    // 重新加载第一页数据
    reload () {
      this.pageNum = 1 // 第一页
      // 如果前一次已经到最后一页面,重新搜索,再上拉时,会有bug
      this.isLastPage = false
      this.goodsList = [] // 把历史数据清空，只展示第一页数据
      this.queryGoodsList()
    },
    async queryGoodsList () {
      // 如果正在请求中,返回
      if (this.isRequesting) {
        return
      }

      this.isRequesting = true
      let data = await this.$request({
        url: '/api/public/v1/goods/search',
        data: {
          query: this.keyword,
          pagesize: PAGE_SIZE,
          pagenum: this.pageNum
        },
        isShowLoading: false
      })
      // 请求结束后,主动停止下拉刷新的动画，并设置请求结束
      wx.stopPullDownRefresh()
      this.isRequesting = false
      // 下一页数据追加在前面的数据上
      this.goodsList = [...this.goodsList, ...data.goods]
      // 总条数===列表.length
      if (this.goodsList.length === data.total) {
        this.isLastPage = true
      }
    },
    selectMenu (index) {
      this.activeIndex = index
    }
  }
}
</script>

<style lang="less">
.top-header {
  position: static;
  width: 100%;
  background-color: #fff;
  top: 0;
  z-index: 99;
}

.filter-menu {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100rpx;

  view.active {
    color: #eb4450;
  }
}

.goods {
  border-top: 1rpx solid #ddd;
  height: 260rpx;
  box-sizing: border-box;
  padding: 0 20rpx;
  display: flex;
  align-items: center;

  image {
    width: 200rpx;
    height: 200rpx;
  }

  .right {
    flex: 1;
    margin-left: 26rpx;

    .price {
      color: #eb4450;
      font-size: 24rpx;
      margin-top: 80rpx;

      text {
        font-size: 36rpx;
      }
    }
  }
}

.btm-line {
  text-align: center;
}
</style>
